<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .dv {
      background: red;
    }
    div {
      width: 100px;
      height: 100px;
    }
  </style>
  <body>
    <div>
      <div class="dv"></div>
      <button class="btn1">点击1</button>
      <button class="btn2">点击2</button>
      <button>点击移除btn1的事件</button>
    </div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 注册事件的方式1
  // jqdom.eventName(事件处理函数)
  let handle1 = function (e) {
    console.log("btn1");
    //     console.log(e);
    //   console.log(this);
  };
  $(".btn1").click({ name: "李雷" }, handle1);
  //   $(".btn1").click(function () {
  //     console.log(2);
  //   });
  //   $(".btn1").click(function () {
  //     console.log(3);
  //   });

  //注册事件的方式2
  //   可以传递参数 通过处理函数e.data进行获取
  //   $(".btn2").on("click", { name: "韩梅梅" }, function (e) {
  //     console.log(e);
  //     console.log(this);
  //   });

  // 事件委托的注册方式
  //   将btn2的事件委托给div
  $("div").on("click", ".btn2", { name: "韩梅梅" }, function (e) {
    console.log(e);
  });

  //   移除事件  xxx.off('事件名'，事件处理函数)
  let handle = function () {
    // console.log(this);
    // off 移除事件
    $(".btn1").off("click", handle1);
  };
  //   给div中最后一个button绑定事件
  $("div button").last().click(handle);

  //一次性的事件
  $(".btn2").one("click", function () {
    console.log("btn2");
  });

  //触发事件处理函数
  setTimeout(() => {
    $("div button").last().trigger("click");
  }, 3000);

  //hover事件
  $(".dv").hover(
    function () {
      console.log("进去了");
    },
    function () {
      console.log("出来了");
    }
  );
</script>
